<template>
    <div>

        <el-container>
            <el-header><h1 style="text-align: center;width: 100vw;font-family: 隶书;font-size:31px">格调商场结算系统</h1>
            </el-header>
            <el-main class="note" :style ="note">
                <div style="background-image:url('../../assets/格调同城没字.png');">
                    <div style="width:500px;height:300px;margin:110px 32vw;background-color:transparent">
                        <img src="../../assets/格调同城没字.png" height="80" width="130" style="margin-top: -135px"/>
                        <div style="padding: 3vw; font-size: 24px;font-family: 隶书">
                            用户名 ：
                            <el-input placeholder="请输入内容" v-model="managers.nicknme" style="width: 250px;"></el-input>
                            <br/>
                            密 &nbsp;码 ：
                            <el-input placeholder="请输入密码" v-model="managers.pwd" show-password
                                      style="width: 250px"></el-input>
                            <a href="javascript:;">
                                <el-row>
                                    <el-button @click="doLogin(managers)">登陆</el-button>
                                </el-row>
                            </a>
                        </div>
                    </div>
                </div>
            </el-main>
        </el-container>
        <!--<img src="../../assets/动图.gif" height="80" width="130" style="margin-top: -135px"/>-->

    </div>
</template>

<script>
    export default {
        name: "login.vue",
        data() {
            return {
                note: {
                    backgroundImage: "url(" + require("../../assets/壁纸.jpg") + ")",
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "1500px 700px",
                    marginTop: "0px",
                },
                managers: {
                    id: '',
                    storeid: '',
                    nicknme: '',
                    pwd: '',
                    name: '',
                    phone: '',
                    idcard: '',
                    sex: '',
                    job: '',

                }
            }
        },
        methods: {
            doLogin: function (managers) {
                if (this.managers.phone == null && this.managers.phone == "") {
                    alert("手机号必须填")
                } else if (this.managers.pwd == null && this.managers.pwd == "") {
                    alert("密码必须填")
                } else {
                    this.axios.post('http://localhost:8686/Login', managers)
                        .then((response) => {
                            if (response.data.pwd != null && response.data.pwd != "") {
                                this.managers.name = response.data;
                                const h = this.$createElement;
                                this.$message({
                                    message: h('p', null, [
                                        h('span', null, '登陆成功,您好: '),
                                        h('i', {style: 'color: teal'}, response.data.name)
                                    ])
                                })

                                this.$router.push({path: '/tc_shopmall_main'});
                            } else {
                                alert("请重新登陆")
                            }
                        })
                        .catch((error) => {
                            alert(error);
                        });
                }


            }
        }

    }
</script>

<style scoped>
    .el-header {
        background-color: #333333;
        color: white;
        text-align: center;
        line-height: 40px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 40px;
    }
</style>
